<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>小米商城-提交订单</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<link rel="stylesheet" type="text/css" href="./css/style.css">
	<link href="./css/alert.css" rel="stylesheet">
</head>
<body>
	<div class="header_con">
		<div class="header">
		<div class="welcome fl">欢迎来到小米商城!</div>
			<div class="fr">
				<c:if test="${empty user}">
					<div class="login_btn fl">
						<a href="login.jsp">登录</a>
						<span>|</span>
						<a href="register.jsp">注册</a>
					</div>
				</c:if>
				<c:if test="${not empty user}">
					<div class="login_info fl" style="display:block">
						欢迎您：<em>${user.uname}</em>
					</div>
				</c:if>	
				<div class="user_link fl">
					<span>|</span>
					<a href="user_center_info.jsp">用户中心</a>
					<span>|</span>
					<a href="gouwuche.jsp">我的购物车</a>
					<span>|</span>
					<a href="user_center_order.jsp">我的订单</a>
				</div>
			</div>
		</div>		
	</div>

	<div class="search_bar clearfix">
		<a href="index.jsp" class="logo fl"><img src="image/logo_top.png" style="width:80px;"></a>
		<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;用户中心</div>
		<div class="search_con fr">
			<input type="text" class="input_text fl" name="" placeholder="搜索商品">
			<input type="button" class="input_btn fr" name="" value="搜索">
		</div>		
	</div>

	<div class="main_con clearfix">
		<div class="left_menu_con clearfix">
			<h3>用户中心</h3>
			<ul>
				<li><a href="user_center_info.jsp">· 个人信息</a></li>
				<li><a href="user_center_order.jsp" class="active">· 全部订单</a></li>
				<li><a href="user_center_site.jsp">· 收货地址</a></li>
			</ul>
		</div>
		<div class="right_content clearfix">
				<h3 class="common_title2">全部订单</h3>
				
				<div id="orders">
					
				</div>

				<div class="pagenation" id="pageContent">
					
				</div>
		</div>
	</div>

	<!-- 弹框部分代码 -->
	<div class="popOutBg"></div>
	<div class="popOut">
		<span title="关闭"> X </span>
		<table>
			<caption>请输入你的支付密码(6位)</caption>
			<tr>
				<td width="120">密码:</td>
				<td><input id="modify_tname" type="password" class="inp" value="" maxlength="6"/></td>
			</tr>
			<tr>
				<td colspan="2"><input type="button" id="modify_sub"
					class="change_submit" value="提 交" /></td>
			</tr>
		</table>
	</div>

	<footer class="mt20 center">			
		<div class="mt20">小米商城|MIUI|米聊|多看书城|小米路由器|视频电话|小米天猫店|小米淘宝直营店|小米网盟|小米移动|隐私政策|Select Region</div>
		<div>?mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</div> 
		<div>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>
	</footer>
	
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
	if( $(".login_btn").html() ){
		//提示用户先登录
		alert("请先登录");
		location.href="login.jsp";
	}
	
	//用户一进来对订单信息进行显示
	var page=location.href.split("?")[1].split("=")[1];
	$.post("orderServlet",{
		op:"findAllOrder",
		page:page
	},function(data){
		var str='';
		var totalprice=0;
		//console.log("length"+data.length);
		if(data.length>0){
			for(var i=0;i<data.length-1;i++){
				str+='<ul class="order_list_th w978 clearfix"><li class="col01">'+data[i].date+'</li>';
				if(data[i].status==0){
					str+='<li class="col02">订单号:<span id="oid">'+data[i].oid+'</span></li><li class="col02 stress">未支付</li>';
				}else{
					str+='<li class="col02">订单号：'+data[i].oid+'</li><li class="col02 stress">已支付</li>';
				}
				str+='<li class="col02">支付方式：<span id="paytype">'+data[i].ptype+'</span></li></ul>';
				str+='<table class="order_list_table w980"><tbody><tr>';
				if(data[i].status==0){
					str+='<td><input type="checkbox" name="check" id="pay"></td>';
				}
				str+='<td width="55%"><ul class="order_goods_list clearfix">';
				str+='<li class="col01"><img src="'+data[i].pic+'"></li>';
				str+='<li class="col02">'+data[i].tname+'</li>';
				str+='<li class="col03">'+data[i].num+'</li>';
				str+='<li class="col04"><span id="tp">'+data[i].price+'</span>元</li></ul></td>';
			
				str+='<td width="15%" id="allprice">'+data[i].num*data[i].price+'元</td>';
				if(data[i].status==0){
					str+='<td width="15%">待付款</td>';
					str+='<td width="15%"><a href="javascript:void(0);" onclick="toPay(this)" class="oper_btn">去付款</a></td>';
				}else{
					str+='<td width="15%">已付款</td>';
					str+='<td width="15%"><a href="#" class="oper_btn">查看物流</a></td>';
				}
				str+='</tr></tbody></table>';
			}
		}
		$("#orders").html(str);
		
		//开始分页查询
		var mypage='<a href="javascript:void(0)" onclick="changePage(-1)">上一页</a>';
		pages=data[data.length-1].pages;
		//console.log(pages);
		//循环页数
		for( var i=0;i<pages;i++ ){
			if( i == (page-1) ){
				//当前页，应该高亮显示
				mypage+='<a href="user_center_order.jsp?page='+(i+1)+'" class="active">'+(i+1)+'</a>';
			}else{
				mypage+='<a href="user_center_order.jsp?page='+(i+1)+'">'+(i+1)+'</a>';
			}
		}
		mypage+='<a href="javascript:void(0)" onclick="changePage(1)">下一页></a>';
		//console.log(mypage);
		$("#pageContent").html( mypage );
		
	},"json");
	
	//页数的改变
	function changePage( num ){
		page=parseInt(page)
		if( page + num <=0 ){
			page=1;
		}else if( page + num > pages ){
			page=pages;
		}else{
			page=page+num;
		}
		location.href="user_center_order.jsp?page="+page;
	}
	
	//显示付款对话框
	function show(param){
		if(arguments[1] == true){
			return document.querySelectorAll(param);
		}else{
			return document.querySelector(param);
		}
	}
	
	//点击确认付款后的点击事件	对话框的显示隐藏
	function modify(){
		show(".popOut").style.display = "block";
		ani();
		show(".popOutBg").style.display = "block";
		function ani(){
			show(".popOut").className = "popOut ani";
		}
		$(".popOut > span").click(function(){
			show(".popOut").style.display = "none";
			show(".popOutBg").style.display = "none";
		});
	}
	
	//计算结算订单的总金额
	var price=0;
	//获取订单号
	var oid='';
	
	//去付款
	function toPay(that){

		var mytable=$(that).parent().parent().parent().parent();
		//获取点击付款的这个商品是否被选中
		var flag=mytable.find('#pay').prop("checked");
		//获取点击付款的这个商品的付款方式
		var paytype=mytable.parent().find("#paytype").html();
		console.log(paytype);
		//获取选中的这个商品的价格
		//var price=mytable.find("#tp").html();
		var type='';
		if(flag){
			$('input[name="check"]:checked').each(function(){
				//价钱相加
				//console.log($(this).parent().parent().parent().parent().find('#tp').html());
				price+=parseInt( $(this).parent().parent().parent().parent().find('#tp').html() );
				oid+= $(this).parent().parent().parent().parent().prev().find('#oid').html()+",";
				//获取支付方式
				type=$(this).parent().parent().parent().parent().prev().find('#paytype').html();
				
				
			});
			
			//进行弹框提示
			var text=confirm("你选择的商品总计:"+price+"是否确认购买！！！");
			if(text){
				modify();
			}
		}else{
			alert("请先勾选你需要付款的商品");
		}
	}
	
	//输入支付密码后点击确认发送ajax请求去查询密码是否正确
	$("#modify_sub").click(function () {
		//console.log(111);
		//console.log(price+"--"+oid);
		
		//判断支付密码是否为空
		$.post("orderServlet",{
			op:"findPayPwd"
		},function(data){
			//支付密码不为空
			if(data>0){
				//判断余额是否充足
				$.post("orderServlet",{
					op:"findMoney",
					oid:oid
				},function(data){
					if(data>price){
						//获取输入的支付密码
						var pwd = $("#modify_tname").val();
						//发ajax请求去改变订单表的状态 变成已支付  用户的此种支付方式的余额进行减少
							$.post("orderServlet",{
								op:"payOrder",
								paypwd:pwd,
								price:price,
								oid:oid
							},function(data){
								if(data>0){
									alert("付款成功");
									location.reload();
								}else{
									alert("密码输入错误");
								}
							},"text");	
					}else{
						alert("余额不足，请先充值");
						location.href="user_center_info.jsp";
					}
				},"text");	
			}else{
				alert("支付密码为空，请先去设置支付密码");
				location.href="user_center_info.jsp";
			}
		},"text");
		
	});


	
	</script>
	
</body>
</html>